<template>
<view class="container">
	<!-- Tab -->
	<view class="tab-view">
		<view class="tab-view-item"
			:id="0"
			:data-current="0"
			:class="{ 'active': active == 'video' }"
			@click="onTabClick('video')">
			<text class="tab-view-item--text">视频资料</text>
		</view>
		<view class="tab-view-item"
			:id="1"
			:data-current="1"
			:class="{ 'active': active == 'ppt' }"
			@click="onTabClick('ppt')">
			<text class="tab-view-item--text">PPT资料</text>
		</view>
		<view class="tab-view-item"
			:id="2"
			:data-current="2"
			:class="{ 'active': active == 'document' }"
			@click="onTabClick('document')">
			<text class="tab-view-item--text">文档资料</text>
		</view>
	</view>
	<!-- 主体 -->
	<swiper :current="tabIndex"
		class="swiper-box detail-white"
		style="flex: 1;"
		:duration="300"
		@change="onSwiperChange">
		<!-- 视频资料 -->
		<swiper-item class="swiper-item">
			<view class="detail-content"
				v-if="mp4List.length">
				<view class="resource-item sec-top"
					v-for="item in mp4List"
					:key="item.id">
					<video class="resource-item-cover"
						id="myVideo"
						:src="baseURL + '/' + item.hashId"
						@error="videoErrorCallback"
						controls>
					</video>
					<view class="resource-item-text">
						<text>{{ item.filename }}</text>
						<text class="iconfont icon-download middle"
							@click="onDownload('video', item)"></text>
					</view>
				</view>
			</view>
			<view v-else class="empty-text">还没有上传哦～</view>
		</swiper-item>
		<!-- PPT资料 -->
		<swiper-item class="swiper-item">
			<view class="detail-content"
				v-if="pptList.length">
				<view class="resource-item sec-top"
					v-for="item in pptList"
					:key="item.id">
					<view class="resource-item-container"
						@click="onPlay(item)">
						<image class="resource-item-cover"
							:src="baseURL + '/' + item.hashId" 
							mode="aspectFill" />
						<view class="resource-item-mask">
							<text class="iconfont icon-play"
								style="font-size: 56px; color: #666666;"></text>
						</view>
					</view>
					<view class="resource-item-text">
						<text>{{ item.filename }}</text>
						<text class="iconfont icon-download middle"
							@click="onDownload('ppt', item)"></text>
					</view>
				</view>
			</view>
			<view v-else class="empty-text">还没有上传哦～</view>
		</swiper-item>
		<!-- 学习资料 -->
		<swiper-item class="swiper-item">
			<view class="detail-content"
				v-if="documentList.length">
				<uni-grid :column="2"
					:showBorder="false"
					:square="false">
					<uni-grid-item v-for="item in documentList"
						:key="item.id">
						<view class="task-item-info sec-top"
							@click="onDownload('others', item)">
							<view class="task-item-type">
								<image class="list-card-cover"
									:src="baseURL + '/' + item.hashId"
									mode="aspectFill" />
							</view>
							<view class="task-item-date sec-left">
								<text>{{ item.filename }}</text>
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
			<view v-else
				class="empty-text sec-top">还没有上传学习资料哦～</view>
		</swiper-item>
	</swiper>
</view>
</template>

<script>
import { getMyResources, getDownloadFile } from '@/api/index.js';
const baseURL = 'http://edu.ypywh.com';
export default {
	data() {
		return {
			baseURL,
			active: 'video',
			tabIndex: 0,
			tabs: ['video', 'ppt', 'document'],
			mp4List: [],
			pptList: [],
			documentList: []
		}
	},
	onShow() {
		this.reset();
		getMyResources({
			type: 'video'
		}).then(res => {
			this.mp4List = this.mp4List.concat(res.list || []);
		});
		getMyResources({
			type: 'image'
		}).then(res => {
			this.pptList = this.pptList.concat(res.list || []);
		});
		getMyResources({
			type: 'document'
		}).then(res => {
			this.documentList = this.documentList.concat(res.list || []);
		});
	},
	methods: {
		reset() {
			this.mp4List = [];
			this.pptList = [];
			this.documentList = [];
		},
		onPlay(item) {},
		videoErrorCallback() {},
		onDownload(type, item) {
			switch(type) {
				case 'video':
					break;
				case 'ppt':
					break;
				default:
					getDownloadFile(item.id).then(res => {
						console.log('res: ', res)
					})
					break;
			}
		},
		onTabClick(type) {
			this.active = type
			switch(type) {
				case 'ppt':
					this.tabIndex = 1;
					break;
				case 'document':
					this.tabIndex = 2;
					break;
				default:
					this.tabIndex = 0;
					break;
			}
		},
		onSwiperChange(e) {
			const index = e.target.current || e.detail.current;
			this.tabIndex = index;
			this.active = this.tabs[index];
		}
	}
}
</script>

<style lang="scss">
.task-item-type {
	background-color: #EEEEEE;
}
.task-item-date {
	word-break: break-all;
}
</style>
